<template>
  <!-- 讲师详情列表内容 -->
  <div style="overflow: hidden">
    <li @click="gotoclasslist(item)">
      <div class="left"><img :src="item.cover_img" alt="" /></div>
      <div class="right">
        <p>{{ item.title }}</p>
        <section>
         <span style="color:#ccc">{{ item.sales_num }}人已报名</span>
          <div>
            <s>{{ item.sales_base }}</s>
            <b style="color: red;font-size:14px">{{ item.course_classify_id }}</b>
          </div>
        </section>
      </div>
    </li>
  </div>
</template>

<script>
export default {
  props: ["item"],
  data() {
    return {};
  },
  mounted() {},
  methods: {
    gotoclasslist(item){
      console.log(item);
      this.$router.push({path:'/ClassList',query:{item:JSON.stringify(item)}})
    }
  },
  components: {},
};
</script>

<style lang='scss' scoped>
li {
  display: flex;
  box-sizing: border-box;
  padding: 0 25px;
  height: 150px;
  .left {
    flex-basis: 38%;
    padding-top: 20px;
    img {
      width: 100%;
      height: 70%;
      flex-grow: 0;
      justify-content: center;
    }
  }
  .right {
    box-sizing: border-box;
    padding: 0 10px;
    flex-basis: 62%;
    p {
      margin-top: 25px;
      margin-bottom: 45px;
      span {
        display: inline-block;
        border: 1px solid red;
        color: red;
        margin-bottom: 10px;
        height: 16px;
        line-height: 16px;
      }
      b {
        font-size: 14px;
      }
    }
    section {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
